<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
    <link rel="stylesheet" href="../static/styles/style-black.min.css">
    <style type="text/css">
        .highcharts-figure, .highcharts-data-table table {
            min-width: 360px;
            max-width: 800px;
            margin: 1em auto;
        }

        .highcharts-data-table table {
            font-family: Verdana, sans-serif;
            border-collapse: collapse;
            border: 1px solid #EBEBEB;
            margin: 10px auto;
            text-align: center;
            width: 100%;
            max-width: 500px;
        }

        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.2em;
            color: #555;
        }

        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }

        .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
            padding: 0.5em;
        }

        .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }

        .highcharts-data-table tr:hover {
            background: #f1f7ff;
        }

    </style>
</head>

<body>
<script src="../static/scripts/include.js"></script>

<!--<include src="menu.html"></include>-->
<!--<include src="nav.html"></include>-->
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div data-pattern="priority-columns">
                    <div class="row small-spacing">
                        <div class="col-lg-3 col-md-6 col-xs-12">
                            <div class="box-content bg-success text-white">
                                <div class="statistics-box with-icon">
                                    <i class="ico small fa fa-product-hunt"></i>
                                    <p class="text text-white">已 停 车 位 数</p>
                                    <h2 class="counter" id="parking"></h2>
                                </div>
                            </div>
                            <!-- /.box-content -->
                        </div>
                        <!-- /.col-lg-3 col-md-6 col-xs-12 -->
                        <div class="col-lg-3 col-md-6 col-xs-12">
                            <div class="box-content bg-info text-white">
                                <div class="statistics-box with-icon">
                                    <i class="ico small fa fa-cc-visa"></i>
                                    <p class="text text-white">订 单 数 量</p>
                                    <h2 class="counter" id="orders"></h2>
                                </div>
                            </div>
                            <!-- /.box-content -->
                        </div>
                        <!-- /.col-lg-3 col-md-6 col-xs-12 -->
                        <div class="col-lg-3 col-md-6 col-xs-12">
                            <div class="box-content bg-danger text-white">
                                <div class="statistics-box with-icon">
                                    <i class="ico small fa fa-exclamation-triangle"></i>
                                    <p class="text text-white">投 诉 量</p>
                                    <h2 class="counter" id="complain"></h2>
                                </div>
                            </div>
                            <!-- /.box-content -->
                        </div>
                        <!-- /.col-lg-3 col-md-6 col-xs-12 -->
                        <div class="col-lg-3 col-md-6 col-xs-12">
                            <div class="box-content bg-warning text-white">
                                <div class="statistics-box with-icon">
                                    <i class="ico small fa fa-rmb"></i>
                                    <p class="text text-white"> 提 成</p>
                                    <h2 class="counter" id="money"></h2>
                                </div>
                            </div>
                            <!-- /.box-content -->
                        </div>
                    </div>
                    <div class="form-group margin-bottom-20 col-xs-2 col-lg-push-10">

                        <select class="form-control" id="timer" onchange="changeTime()">
                            <option value="" id="time"></option>
                            <option value="1" id="time1"></option>
                            <option value="2" id="time2"></option>
                            <option value="3" id="time3"></option>
                        </select>
                    </div>
                    <figure class="highcharts-figure">
                        <div id="container1"></div>
                    </figure>

                </div>
                <!-- /.box-content -->
            </div>
            <!-- /.col-lg-6 col-xs-12 -->
            <footer class="footer">
                <ul class="list-inline">
                    <li>Copyright &copy; 2020.Dawn-Organization.
                    </li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Terms</a></li>
                    <li><a href="http://www.baidu.com">Help</a></li>
                </ul>
            </footer>
        </div>

        <!-- /.row small-spacing -->
    </div>
    <!-- /.main-content -->
</div><!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../static/script/html5shiv.min.js"></script>
<script src="../static/script/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>

<script src="../static/scripts/main.min.js"></script>
<script src="../static/highcharts/highcharts.js"></script>
<script src="../static/highcharts/modules/series-label.js"></script>
<script src="../static/highcharts/modules/exporting.js"></script>
<script src="../static/highcharts/modules/export-data.js"></script>
<script src="../static/highcharts/modules/accessibility.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        getNowFormatDate();
        let YEAR = changeTime();
        PIE(YEAR);
        DATA();
    })

    function changeTime() {
        var options = $("#timer option:selected");
        var YEAR = options.text(); //拿到选中项的值
        PIE(YEAR);
        return YEAR;
    }

    function getNowFormatDate() {
        var date = new Date();
        var currentdate = date.getFullYear();
        $("#time").html(currentdate);
        $("#time1").html(currentdate - 1);
        $("#time2").html(currentdate - 2);
        $("#time3").html(currentdate - 3);
    }

    function PIE(YEAR) {
        $.ajax({
            url: "/property/goodB",
            type: "post",
            data: {"YEAR": YEAR},
            success: function (obj) {
                let five;
                let four;
                let three;
                let two;
                let one;
                let good;
                let normal;
                let bad;
                $.each(obj.percent, function (index, pp) {
                    five = pp.five * 100;
                    four = pp.four * 100;
                    three = pp.three * 100;
                    two = pp.two * 100;
                    one = pp.one * 100;
                    good = pp.good;
                    normal = pp.normal;
                    bad = pp.bad;
                })


                var colors = Highcharts.getOptions().colors,
                    categories = [
                        '好评',
                        '中评',
                        '差评'
                    ],
                    data = [
                        {
                            y: good * 100,
                            color: colors[2],
                            drilldown: {
                                name: '好评',
                                categories: [
                                    '五分',
                                    '四分'
                                ],
                                data: [
                                    five,
                                    four
                                ]
                            }
                        },
                        {
                            y: normal * 100,
                            color: colors[1],
                            drilldown: {
                                name: '中评',
                                categories: [
                                    '3分',
                                    '2分'
                                ],
                                data: [
                                    three,
                                    two
                                ]
                            }
                        },
                        {
                            y: bad * 100,
                            color: colors[0],
                            drilldown: {
                                name: '差评',
                                categories: [
                                    '1分'
                                ],
                                data: [
                                    one
                                ]
                            }
                        }
                    ],
                    browserData = [],
                    versionsData = [],
                    i,
                    j,
                    dataLen = data.length,
                    drillDataLen,
                    brightness;


                // Build the data arrays
                for (i = 0; i < dataLen; i += 1) {

                    // add browser data
                    browserData.push({
                        name: categories[i],
                        y: data[i].y,
                        color: data[i].color
                    });

                    // add version data
                    drillDataLen = data[i].drilldown.data.length;
                    for (j = 0; j < drillDataLen; j += 1) {
                        brightness = 0.2 - (j / drillDataLen) / 5;
                        versionsData.push({
                            name: data[i].drilldown.categories[j],
                            y: data[i].drilldown.data[j],
                            color: Highcharts.color(data[i].color).brighten(brightness).get()
                        });
                    }
                }

                // Create the chart
                Highcharts.chart('container1', {
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: '评论占比'
                    },
                    subtitle: {
                        text: '评论占比'
                    },
                    plotOptions: {
                        pie: {
                            shadow: false,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        valueSuffix: '%'
                    },
                    series: [{
                        name: 'Browsers',
                        data: browserData,
                        size: '60%',
                        dataLabels: {
                            formatter: function () {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: '#ffffff',
                            distance: -30
                        }
                    }, {
                        name: 'Versions',
                        data: versionsData,
                        size: '80%',
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function () {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
                                    this.y + '%' : null;
                            }
                        },
                        id: 'versions'
                    }],
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 400
                            },
                            chartOptions: {
                                series: [{}, {
                                    id: 'versions',
                                    dataLabels: {
                                        enabled: false
                                    }
                                }]
                            }
                        }]
                    }
                });

            }
        })

    }

    function DATA() {
        let complain;
        let orders;
        let parking;
        let money;
        $.ajax({
            url: "/property/changeDATA",
            type: "post",
            success: function (obj) {
                complain = obj.complain.complain;
                orders = obj.orders.orders;
                parking = obj.parking.parking;
                money = obj.money.money;
                $("#parking").html(parking);
                $("#orders").html(orders);
                $("#money").html(money);
                $("#complain").html(complain);
            }

        })


    }


</script>
</body>


</html>